/*
 * @Description: 
 * @Date: 2022-12-06 20:21:30
 * @Author: lizhiqiang
 */
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined
} from '@ant-design/icons';
import { Layout } from 'antd';
import React, { useState } from 'react';
import './index.module.scss'
import { Outlet } from 'react-router-dom';
import MainMenu from '@/components/mainMenu';
import MainHead from '@/components/mainHead';
import { useLocation } from 'react-router-dom';
import NotFound from '@/assets/img/404.png'
import { useNavigate } from 'react-router-dom';
import useStore from '@/store';

const { Sider, Content } = Layout;


const View: React.FC = () => {
  const navigateTo = useNavigate();
  const [collapsed, setCollapsed] = useState(false);

  // 在组件中获取当前页面路径
  const location = useLocation();
  const currentPage = location.pathname;

  // 根据当前页面设置样式
  const contentStyle = currentPage === '/dashBoard' || currentPage === '/activity/coupon/couponStatistic' || currentPage === '/activity/integral/statisticsActivity' || currentPage === '/wallet/statistic' ? {
    minHeight: 280,
    overflowY: 'auto',
    background: '#ffffff',
  } : {
    margin: '20px 16px',
    padding: '20px',
    minHeight: 280,
    // overflowY: 'auto',
    background: '#ffffff'
  };

  if (currentPage === '/workplace' && contentStyle.margin) {
    contentStyle.margin = '0'
  }

  //判断404
  var isHave = false;
  const mymenus = useStore((state) => state.usedMenu);
  const usedMenu = JSON.parse(mymenus)
  if (usedMenu) {
    var isHave = usedMenu.includes(currentPage);
  }

  // 返回首页
  const backHome = () => {
    const usedMenu = JSON.parse(mymenus);
    if (usedMenu && usedMenu.length > 0) {
      let indexToRedirect = 0;
      for (let i = 0; i < usedMenu.length; i++) {
        if (usedMenu[i] !== "/workplace" && usedMenu[i] !== "") {
          indexToRedirect = i;
          break;
        }
      }
      navigateTo(usedMenu[indexToRedirect], { replace: true }); //跳到不是/workplace的第一项
    } else {
      navigateTo("/workplace");
    }
  }


  //返回上一页
  const backNext = () => {
    navigateTo(-1)
  }


  return (
    <div>
      {isHave === false &&
        <div className='notFound'>
          <img src={NotFound} alt="" />
          <div className='text'>
            <div className='sorry'>Sorry！您访问的页面不存在！</div>
            <div className='textInfo'>页面不存在或您没有权限访问此页面</div>
            <div className='btns'>
              <button onClick={backHome}>返回首页</button>
              <button onClick={backNext}>返回上一页</button>
            </div>
          </div>
        </div>
      }
      {/* 非404就渲染界面 */}
      {isHave === true &&
        <div>
          <Layout >
            <MainHead />
            <Layout className="site-layout">
              {location.pathname != '/workplace' && <Sider trigger={null} collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
                <MainMenu />
                <div className='sider-trgger'>
                  {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                    className: 'trigger',
                    onClick: () => setCollapsed(!collapsed),
                  })}
                </div>
              </Sider>}
              <Content
                style={contentStyle}
              >
                <Outlet />
              </Content>
            </Layout>
          </Layout>
        </div>
      }

    </div>
  );
}

export default View;